<template>
  <div class="box">
    <h2>Son2 子组件</h2>
    <!-- 从vuex中获取的值:<label>{{$store.state.count}}</label> -->
    从vuex中获取的值:<label>{{count}}</label>
    <br />
    <button @click="subCount(1)">值 - 1</button>
    <button @click="subCount(5)">值 - 5</button>
    <button @click="subCount(10)">值 - 10</button>
    <button @click="changeCountAsync(777)">1s后改count值为777</button>
     <hr>
    <p>访问getters中的数据:{{filterList}}</p>
     <hr>
    <h2>访问模块内的数据</h2>
    <p>访问user模块下的userInfo.name:{{userInfo.name}}</p>
    <p>访问user模块下的getters:{{upperCaseName}}</p>
     <p>访问setting模块下的theme:{{theme}}</p>
    <h2>调用模块内的mutations方法</h2>
    <button @click="setUserInfo({name:'lw',age:30})">更新user模块下的userInfo</button>
    <button @click="setTheme('black')">更新setting模块下的theme</button>
    <hr>
    <h2>调用模块内的actions方法</h2>
    <button @click="setUserInfoAsync({name:'laoli',age:50})">1s后修改用户信息</button>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'
export default {
  name: 'Son2Com',
  computed: {
    ...mapState(['count']),
    ...mapGetters(['filterList']),
    ...mapState('user', ['userInfo']),
    ...mapGetters('user', ['upperCaseName']),
    ...mapState('setting', ['theme'])
  },
  methods: {
    // 在methods中定义了subCount这个方法
    ...mapMutations(['subCount']),
    ...mapActions(['changeCountAsync']),
    ...mapMutations('user', ['setUserInfo']),
    ...mapMutations('setting', ['setTheme']),
    ...mapActions('user', ['setUserInfoAsync'])
    // subCountFn (count) {
    //   this.$store.commit('subCount', count)
    // }
  }
}
</script>

<style lang="css" scoped>
.box {
  border: 3px solid #ccc;
  width: 400px;
  padding: 10px;
  margin: 20px;
}
h2 {
  margin-top: 10px;
}
</style>
